const cards = document.querySelectorAll('.card');
const getFindHeight = (elm,child)=> parseInt( getComputedStyle(elm.querySelector(child)).height);
const setCss = (elm,style,val) => elm.style.setProperty(style,val);


for(let i=0,card;card = cards[i];i++){
    card.addEventListener("click",function(){
        
        let card_offset_scrolltop = this.offsetTop - window.scrollY;
        setCss(this,"--card-top",-card_offset_scrolltop + 'px') ;

        

        this.classList.toggle("active");
        let ratio = 480 / 420;
        let height = window.innerHeight;
        height -= getFindHeight(this,"img") * ratio;
        height -= getFindHeight(this,"h4") * ratio;
        height /= ratio;
        setCss(this.querySelector('.content'),'height',height + 'px');

        if(this.classList.contains("active")){
            document.body.classList.add("no-scroll");
        }else{
            document.body.classList.remove("no-scroll");
        }

       
    })
   
}